import React, { Component } from 'react';
import { connect } from 'dva';
import { Table, Tag, Card, Form } from 'antd';

@connect(({ list, loading }) => ({
    data: list.data, // 每写一行，就是将该变量data加入到this.props里面
    tableLoading: loading.effects['list/getListData'],
}))
class List extends Component {
    state = {}

    componentDidMount() {
        // dispatch===>this.props
        // dispatch 的作用：在页面里调用models里面effects里面方法
        const { dispatch } = this.props;
        dispatch({
            type: 'list/getListData',
            payload: { pageSize: 10, pageNum: 1 },
        });

    }

    columns = [
        {
            title: '标题',
            dataIndex: 'title',
            key: 'title',
            render: text => <a>{text}</a>,
        },
        {
            title: '创建时间',
            dataIndex: 'time',
            key: 'time',
        },
        {
            title: '创建人',
            dataIndex: 'createName',
            key: 'createName',
        },
        {
            title: '状 态',
            dataIndex: 'status',
            key: 'status',
        },
        {
            title: '浏览次数',
            dataIndex: 'viewCount',
            key: 'viewCount',
        },
        {
            title: '操 作',
            render: (text, record) => (
                <span>
                    <Tag color="#f50">查看</Tag>
                    <Tag color="#2db7f5">修改</Tag>
                    <Tag color="#87d068">删除</Tag>
                </span>
            ),
        },
    ];

    render() {

        const { data, tableLoading } = this.props;
        console.log('loading', tableLoading)
        return (
            <Card>
                <Table
                    dataSource={data}
                    columns={this.columns}
                    loading={tableLoading}
                />
            </Card>
        );
    }
}

export default List;